

<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
  <meta charset="utf-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>Quick overview &mdash; LittlevGL 6.1.2 documentation</title>
  

  
  
    <link rel="shortcut icon" href="../_static/favicon.ico"/>
  
  
  

  
  <script type="text/javascript" src="../_static/js/modernizr.min.js"></script>
  
    
      <script type="text/javascript" id="documentation_options" data-url_root="../" src="../_static/documentation_options.js"></script>
        <script src="../_static/jquery.js"></script>
        <script src="../_static/underscore.js"></script>
        <script src="../_static/doctools.js"></script>
        <script src="../_static/language_data.js"></script>
    
    <script type="text/javascript" src="../_static/js/theme.js"></script>

    

  
  <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/custom.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/fontawesome.min.css" type="text/css" />
    <link rel="index" title="Index" href="../genindex.html" />
    <link rel="search" title="Search" href="../search.html" />
    <link rel="next" title="Micropython" href="micropython.html" />
    <link rel="prev" title="Simulator on PC" href="pc-simulator.html" />
 
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-78811084-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-78811084-3');
</script>

</head>

<body class="wy-body-for-nav">

   
  <div class="wy-grid-for-nav">
    
    <nav data-toggle="wy-nav-shift" class="wy-nav-side">
      <div class="wy-side-scroll">
        <div class="wy-side-nav-search" >
          

          
            <a href="../index.html">
          

          
            
            <img src="../_static/white_white_lvgl_full_logo.svg" class="logo" alt="Logo"/>
          
          </a>

          
            
            
              <div class="version">
                6.1.2
              </div>
            
          

          
<div role="search">
  <form id="rtd-search-form" class="wy-form" action="../search.html" method="get">
    <input type="text" name="q" placeholder="Search docs" />
    <input type="hidden" name="check_keywords" value="yes" />
    <input type="hidden" name="area" value="default" />
  </form>
</div>

          
        </div>

        <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
          
            
            
              
            
            
              <ul class="current">
<li class="toctree-l1 current"><a class="reference internal" href="index.html">Get started</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="live-demo.html">Live demos</a></li>
<li class="toctree-l2"><a class="reference internal" href="pc-simulator.html">Simulator on PC</a><ul>
<li class="toctree-l3"><a class="reference internal" href="pc-simulator.html#select-an-ide">Select an IDE</a></li>
<li class="toctree-l3"><a class="reference internal" href="pc-simulator.html#set-up-eclipse-cdt">Set-up Eclipse CDT</a><ul>
<li class="toctree-l4"><a class="reference internal" href="pc-simulator.html#install-eclipse-cdt">Install Eclipse CDT</a></li>
<li class="toctree-l4"><a class="reference internal" href="pc-simulator.html#install-sdl-2">Install SDL 2</a></li>
<li class="toctree-l4"><a class="reference internal" href="pc-simulator.html#pre-configured-project">Pre-configured project</a></li>
<li class="toctree-l4"><a class="reference internal" href="pc-simulator.html#add-the-pre-configured-project-to-eclipse-cdt">Add the pre-configured project to Eclipse CDT</a></li>
<li class="toctree-l4"><a class="reference internal" href="pc-simulator.html#compile-and-run">Compile and Run</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2 current"><a class="current reference internal" href="#">Quick overview</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#add-littlevgl-into-your-project">Add LittlevGL into your project</a></li>
<li class="toctree-l3"><a class="reference internal" href="#learn-the-basics">Learn the basics</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#objects-widgets">Objects (Widgets)</a></li>
<li class="toctree-l4"><a class="reference internal" href="#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="#events">Events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#button-with-label">Button with label</a></li>
<li class="toctree-l4"><a class="reference internal" href="#button-with-styles">Button with styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="#slider-and-object-alignment">Slider and object alignment</a></li>
<li class="toctree-l4"><a class="reference internal" href="#list-and-themes">List and themes</a></li>
<li class="toctree-l4"><a class="reference internal" href="#use-littlevgl-from-micropython">Use LittlevGL from Micropython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#contributing">Contributing</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="micropython.html">Micropython</a><ul>
<li class="toctree-l3"><a class="reference internal" href="micropython.html#what-is-micropython">What is Micropython?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="micropython.html#highlights-of-micropython">Highlights of Micropython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="micropython.html#why-micropython-littlevgl">Why Micropython + LittlevGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="micropython.html#here-are-some-advantages-of-using-littlevgl-in-micropython">Here are some advantages of using LittlevGL in Micropython:</a></li>
<li class="toctree-l4"><a class="reference internal" href="micropython.html#micropython-littlevgl-could-be-used-for">Micropython + LittlevGL could be used for:</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="micropython.html#so-what-does-it-look-like">So what does it look like?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="micropython.html#a-simple-example">A simple example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="micropython.html#how-can-i-use-it">How can I use it?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="micropython.html#online-simulator">Online Simulator</a></li>
<li class="toctree-l4"><a class="reference internal" href="micropython.html#pc-simulator">PC Simulator</a></li>
<li class="toctree-l4"><a class="reference internal" href="micropython.html#embedded-platform">Embedded platform</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="micropython.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../porting/index.html">Porting</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../porting/sys.html">System overview</a></li>
<li class="toctree-l2"><a class="reference internal" href="../porting/project.html">Set-up a project</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#get-the-library">Get the library</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#configuration-file">Configuration file</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#initialization">Initialization</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/display.html">Display interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#display-buffer">Display buffer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#display-driver">Display driver</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/indev.html">Input device interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#types-of-input-devices">Types of input devices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#touchpad-mouse-or-any-pointer">Touchpad, mouse or any pointer</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#keypad-or-keyboard">Keypad or keyboard</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#encoder">Encoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#button">Button</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#other-features">Other features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/tick.html">Tick interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/tick.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/task-handler.html">Task Handler</a></li>
<li class="toctree-l2"><a class="reference internal" href="../porting/sleep.html">Sleep management</a></li>
<li class="toctree-l2"><a class="reference internal" href="../porting/os.html">Operating system and interrupts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/os.html#tasks-and-threads">Tasks and threads</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/os.html#interrupts">Interrupts</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/log.html">Logging</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#log-level">Log level</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#logging-with-printf">Logging with printf</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#custom-log-function">Custom log function</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#add-logs">Add logs</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../overview/index.html">Overview</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../overview/object.html">Objects</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/object.html#object-attributes">Object attributes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#basic-attributes">Basic attributes</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#specific-attributes">Specific attributes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/object.html#object-s-working-mechanisms">Object’s working mechanisms</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#parent-child-structure">Parent-child structure</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#moving-together">Moving together</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#visibility-only-on-the-parent">Visibility only on the parent</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#create-delete-objects">Create - delete objects</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/object.html#screen-the-most-basic-parent">Screen – the most basic parent</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/layer.html">Layers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/layer.html#order-of-creation">Order of creation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/layer.html#bring-to-the-foreground">Bring to the foreground</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/layer.html#top-and-sys-layers">Top and sys layers</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/event.html">Events</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/event.html#event-types">Event types</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/event.html#generic-events">Generic events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/event.html#special-events">Special events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/event.html#custom-data">Custom data</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/event.html#send-events-manually">Send events manually</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/style.html">Styles</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#use-the-styles">Use the styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#inherit-styles">Inherit styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#style-properties">Style properties</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style.html#common-properties">Common properties</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style.html#body-style-properties">Body style properties</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style.html#text-style-properties">Text style properties</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style.html#image-style-properties">Image style properties</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/style.html#line-style-properties">Line style properties</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#built-in-styles">Built-in styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#create-new-styles">Create new styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#style-animations">Style animations</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#style-example">Style example</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/style.html#themes">Themes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/style.html#live-update">Live update</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/indev.html">Input devices</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/indev.html#pointers">Pointers</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/indev.html#keypad-and-encoder">Keypad and encoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/indev.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/indev.html#complete-example">Complete example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/indev.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/indev.html#input-device">Input device</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/indev.html#id1">Groups</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/display.html">Displays</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/display.html#using-only-one-display">Using only one display</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/display.html#mirror-display">Mirror display</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/display.html#split-image">Split image</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/display.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/display.html#opaque-screen">Opaque screen</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/display.html#features-of-displays">Features of displays</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/display.html#inactivity">Inactivity</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/display.html#colors">Colors</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/display.html#convert-color">Convert color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/display.html#swap-16-colors">Swap 16 colors</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/display.html#create-and-mix-colors">Create and mix colors</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/display.html#opacity">Opacity</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/display.html#built-in-colors">Built-in colors</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/display.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/display.html#display">Display</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/display.html#id1">Colors</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/font.html">Fonts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/font.html#unicode-support">Unicode support</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/font.html#built-in-fonts">Built-in fonts</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/font.html#special-features">Special features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/font.html#bidirectional-support">Bidirectional support</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/font.html#subpixel-rendering">Subpixel rendering</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/font.html#compress-fonts">Compress fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/font.html#add-new-font">Add new font</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/font.html#add-new-symbols">Add new symbols</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/font.html#add-a-new-font-engine">Add a new font engine</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/image.html">Images</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/image.html#store-images">Store images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#variables">Variables</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#files">Files</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/image.html#color-formats">Color formats</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/image.html#add-and-use-images">Add and use images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#online-converter">Online converter</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#manually-create-an-image">Manually create an image</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#use-images">Use images</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/image.html#image-decoder">Image decoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#custom-image-formats">Custom image formats</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#register-an-image-decoder">Register an image decoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#manually-use-an-image-decoder">Manually use an image decoder</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/image.html#image-caching">Image caching</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#cache-size">Cache size</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#value-of-images">Value of images</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#memory-usage">Memory usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#clean-the-cache">Clean the cache</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../overview/image.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#id1">Image decoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="../overview/image.html#image-cache">Image cache</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/file-system.html">File system</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/file-system.html#add-a-driver">Add a driver</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/file-system.html#usage-example">Usage example</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/file-system.html#use-drivers-for-images">Use drivers for images</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/file-system.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/animation.html">Animations</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/animation.html#create-an-animation">Create an animation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/animation.html#animation-path">Animation path</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/animation.html#speed-vs-time">Speed vs time</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/animation.html#delete-animations">Delete animations</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/animation.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../overview/animation.html#input-device">Input device</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/task.html">Tasks</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/task.html#create-a-task">Create a task</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/task.html#ready-and-reset">Ready and Reset</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/task.html#set-parameters">Set parameters</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/task.html#one-shot-tasks">One-shot tasks</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/task.html#measure-idle-time">Measure idle time</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/task.html#asynchronous-calls">Asynchronous calls</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/task.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../overview/drawing.html">Drawing</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../overview/drawing.html#buffering-types">Buffering types</a></li>
<li class="toctree-l3"><a class="reference internal" href="../overview/drawing.html#mechanism-of-screen-refreshing">Mechanism of screen refreshing</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../object-types/index.html">Object types (Widgets)</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../object-types/obj.html">Base object (lv_obj)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/obj.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/obj.html#coordinates">Coordinates</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/obj.html#parents-and-children">Parents and children</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/obj.html#screens">Screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/obj.html#layers">Layers</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/obj.html#style">Style</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/obj.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/obj.html#attributes">Attributes</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/obj.html#opa-scale">Opa scale</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/obj.html#protect">Protect</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/obj.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/obj.html#extended-click-area">Extended click area</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/obj.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/obj.html#id1">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/obj.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/obj.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/obj.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/obj.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/obj.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/arc.html">Arc (lv_arc)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/arc.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/arc.html#angles">Angles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/arc.html#notes">Notes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/arc.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/arc.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/arc.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/arc.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/arc.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/arc.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/arc.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/bar.html">Bar (lv_bar)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/bar.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/bar.html#value-and-range">Value and range</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/bar.html#symmetrical">Symmetrical</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/bar.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/bar.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/bar.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/bar.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/bar.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/bar.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/bar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/btn.html">Button (lv_btn)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/btn.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/btn.html#states">States</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/btn.html#toggle">Toggle</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/btn.html#layout-and-fit">Layout and Fit</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/btn.html#ink-effect">Ink effect</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/btn.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/btn.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/btn.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/btn.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/btn.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/btn.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/btn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/btnm.html">Button matrix (lv_btnm)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/btnm.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/btnm.html#button-s-text">Button’s text</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/btnm.html#control-buttons">Control buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/btnm.html#one-toggle">One toggle</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/btnm.html#recolor">Recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/btnm.html#notes">Notes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/btnm.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/btnm.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/btnm.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/btnm.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/btnm.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/btnm.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/btnm.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/calendar.html">Calendar (lv_calendar)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/calendar.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/calendar.html#current-date">Current date</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/calendar.html#shown-date">Shown date</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/calendar.html#highlighted-days">Highlighted days</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/calendar.html#name-of-the-days">Name of the days</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/calendar.html#name-of-the-months">Name of the months</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/calendar.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/calendar.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/calendar.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/calendar.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/calendar.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/calendar.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/calendar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/canvas.html">Canvas (lv_canvas)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/canvas.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/canvas.html#buffer">Buffer</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/canvas.html#palette">Palette</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/canvas.html#drawing">Drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/canvas.html#rotate">Rotate</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/canvas.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/canvas.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/canvas.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/canvas.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/canvas.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/canvas.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/canvas.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/cb.html">Checkbox (lv_cb)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cb.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/cb.html#text">Text</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/cb.html#check-uncheck">Check/Uncheck</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/cb.html#inactive">Inactive</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cb.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cb.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cb.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cb.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/cb.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/cb.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cb.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/chart.html">Chart (lv_chart)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/chart.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/chart.html#data-series">Data series</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/chart.html#series-type">Series’ type</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/chart.html#modify-the-data">Modify the data</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/chart.html#update-modes">Update modes</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/chart.html#number-of-points">Number of points</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/chart.html#vertical-range">Vertical range</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/chart.html#division-lines">Division lines</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/chart.html#series-appearance">Series’ appearance</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/chart.html#tick-marks-and-labels">Tick marks and labels</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/chart.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/chart.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/chart.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/chart.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/chart.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/chart.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/chart.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/cont.html">Container (lv_cont)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cont.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/cont.html#layout">Layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/cont.html#autofit">Autofit</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cont.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cont.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cont.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cont.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/cont.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/cont.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cont.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/cpicker.html">Color picker (lv_cpicker)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cpicker.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/cpicker.html#types-of-color-pickers">Types of color pickers</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/cpicker.html#notes">Notes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cpicker.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cpicker.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cpicker.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cpicker.html#example">Example</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/cpicker.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/ddlist.html">Drop-down list (lv_ddlist)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/ddlist.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ddlist.html#set-options">Set options</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ddlist.html#get-selected-option">Get selected option</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ddlist.html#align-the-options">Align the options</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ddlist.html#height-and-width">Height and width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ddlist.html#scrollbars">Scrollbars</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ddlist.html#animation-time">Animation time</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ddlist.html#decoration-arrow">Decoration arrow</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ddlist.html#manually-open-close">Manually open/close</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ddlist.html#stay-open">Stay open</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/ddlist.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/ddlist.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/ddlist.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/ddlist.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ddlist.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ddlist.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/ddlist.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/gauge.html">Gauge (lv_gauge)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/gauge.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/gauge.html#scale">Scale</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/gauge.html#needles">Needles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/gauge.html#range">Range</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/gauge.html#critical-value">Critical value</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/gauge.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/gauge.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/gauge.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/gauge.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/gauge.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/gauge.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/gauge.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/img.html">Image (lv_img)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/img.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/img.html#image-source">Image source</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/img.html#label-as-an-image">Label as an image</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/img.html#transparency">Transparency</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/img.html#palette-and-alpha-index">Palette and Alpha index</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/img.html#recolor">Recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/img.html#auto-size">Auto-size</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/img.html#mosaic">Mosaic</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/img.html#offset">Offset</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/img.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/img.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/img.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/img.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/img.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/img.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/img.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/imgbtn.html">Image button (lv_imgbtn)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/imgbtn.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/imgbtn.html#image-sources">Image sources</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/imgbtn.html#states">States</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/imgbtn.html#toggle">Toggle</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/imgbtn.html#style-usage">Style usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/imgbtn.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/imgbtn.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/imgbtn.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/imgbtn.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/imgbtn.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/imgbtn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/kb.html">Keyboard (lv_kb)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/kb.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/kb.html#modes">Modes</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/kb.html#assign-text-area">Assign Text area</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/kb.html#new-keymap">New Keymap</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/kb.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/kb.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/kb.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/kb.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/kb.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/kb.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/kb.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/label.html">Label (lv_label)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/label.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/label.html#set-text">Set text</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/label.html#line-break">Line break</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/label.html#long-modes">Long modes</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/label.html#text-align">Text align</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/label.html#draw-background">Draw background</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/label.html#text-recolor">Text recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/label.html#very-long-texts">Very long texts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/label.html#symbols">Symbols</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/label.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/label.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/label.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/label.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/label.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/label.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/label.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/led.html">LED (lv_led)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/led.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/led.html#brightness">Brightness</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/led.html#toggle">Toggle</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/led.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/led.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/led.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/led.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/led.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/led.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/led.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/line.html">Line (lv_line)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/line.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/line.html#set-points">Set points</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/line.html#auto-size">Auto-size</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/line.html#invert-y">Invert y</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/line.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/line.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/line.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/line.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/line.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/line.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/line.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/list.html">List (lv_list)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/list.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/list.html#add-buttons">Add buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/list.html#delete-buttons">Delete buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/list.html#manual-navigation">Manual navigation</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/list.html#layout">Layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/list.html#edge-flash">Edge flash</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/list.html#scroll-propagation">Scroll propagation</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/list.html#style-usage">Style usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/list.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/list.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/list.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/list.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/list.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/list.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/lmeter.html">Line meter (lv_lmeter)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/lmeter.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/lmeter.html#set-value">Set value</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/lmeter.html#range-and-angles">Range and Angles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/lmeter.html#angle-offset">Angle offset</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/lmeter.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/lmeter.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/lmeter.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/lmeter.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/lmeter.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/lmeter.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/lmeter.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/mbox.html">Message box (lv_mbox)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/mbox.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/mbox.html#set-text">Set text</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/mbox.html#add-buttons">Add buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/mbox.html#auto-close">Auto-close</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/mbox.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/mbox.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/mbox.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/mbox.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/mbox.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/mbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/page.html">Page (lv_page)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/page.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/page.html#scrollbars">Scrollbars</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/page.html#glue-object">Glue object</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/page.html#focus-object">Focus object</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/page.html#manual-navigation">Manual navigation</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/page.html#edge-flash">Edge flash</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/page.html#scroll-propagation">Scroll propagation</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/page.html#scrollable-api">Scrollable API</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/page.html#notes">Notes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/page.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/page.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/page.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/page.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/page.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/page.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/preload.html">Preloader (lv_preload)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/preload.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/preload.html#arc-length">Arc length</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/preload.html#spinning-speed">Spinning speed</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/preload.html#spin-types">Spin types</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/preload.html#spin-direction">Spin direction</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/preload.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/preload.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/preload.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/preload.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/preload.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/preload.html#id1">MicroPython</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/preload.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/preload.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/roller.html">Roller (lv_roller)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/roller.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/roller.html#set-options">Set options</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/roller.html#get-selected-option">Get selected option</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/roller.html#align-the-options">Align the options</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/roller.html#height-and-width">Height and width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/roller.html#animation-time">Animation time</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/roller.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/roller.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/roller.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/roller.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/roller.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/roller.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/roller.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/slider.html">Slider (lv_slider)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/slider.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/slider.html#value-and-range">Value and range</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/slider.html#symmetrical">Symmetrical</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/slider.html#knob-placement">Knob placement</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/slider.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/slider.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/slider.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/slider.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/slider.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/slider.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/slider.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/spinbox.html">Spinbox (lv_spinbox)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/spinbox.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/spinbox.html#set-format">Set format</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/spinbox.html#value-and-ranges">Value and ranges</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/spinbox.html#style-usage">Style usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/spinbox.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/spinbox.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/spinbox.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/spinbox.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/spinbox.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/spinbox.html#api">API</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/spinbox.html#id1">Example</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/sw.html">Switch (lv_sw)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/sw.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/sw.html#change-state">Change state</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/sw.html#animation-time">Animation time</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/sw.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/sw.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/sw.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/sw.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/sw.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/sw.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/sw.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/table.html">Table (lv_table)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/table.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/table.html#rows-and-columns">Rows and Columns</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/table.html#width-and-height">Width and Height</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/table.html#set-cell-value">Set cell value</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/table.html#align">Align</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/table.html#cell-type">Cell type</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/table.html#merge-cells">Merge cells</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/table.html#crop-text">Crop text</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/table.html#scroll">Scroll</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/table.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/table.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/table.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/table.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/table.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/table.html#id1">MicroPython</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/table.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/table.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/tabview.html">Tabview (lv_tabview)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/tabview.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/tabview.html#adding-tab">Adding tab</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/tabview.html#change-tab">Change tab</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/tabview.html#tab-button-s-position">Tab button’s position</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/tabview.html#hide-the-tabs">Hide the tabs</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/tabview.html#animation-time">Animation time</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/tabview.html#style-usage">Style usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/tabview.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/tabview.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/tabview.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/tabview.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/tabview.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/tabview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/ta.html">Text area (lv_ta)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/ta.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#add-text">Add text</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#placeholder">Placeholder</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#delete-character">Delete character</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#move-the-cursor">Move the cursor</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#cursor-types">Cursor types</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#one-line-mode">One line mode</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#password-mode">Password mode</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#text-align">Text align</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#accepted-characters">Accepted characters</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#max-text-length">Max text length</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#very-long-texts">Very long texts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#select-text">Select text</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#scrollbars">Scrollbars</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#scroll-propagation">Scroll propagation</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#edge-flash">Edge flash</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/ta.html#style-usage">Style usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/ta.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/ta.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/ta.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/ta.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/ta.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/tileview.html">Tile view (lv_tileview)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/tileview.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/tileview.html#valid-positions">Valid positions</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/tileview.html#add-element">Add element</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/tileview.html#set-tile">Set tile</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/tileview.html#animation-time">Animation time</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/tileview.html#edge-flash">Edge flash</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/tileview.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/tileview.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/tileview.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/tileview.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/tileview.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/tileview.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/tileview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../object-types/win.html">Window (lv_win)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../object-types/win.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/win.html#title">Title</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/win.html#control-buttons">Control buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/win.html#scrollbars">Scrollbars</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/win.html#manual-scroll-and-focus">Manual scroll and focus</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/win.html#layout">Layout</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/win.html#style-usage">Style usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/win.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/win.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/win.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../object-types/win.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../object-types/win.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../object-types/win.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
</ul>

            
          
        </div>
      </div>
    </nav>

    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">

      
      <nav class="wy-nav-top" aria-label="top navigation">
        
          <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
          <a href="../index.html">LittlevGL</a>
        
      </nav>


      <div class="wy-nav-content">
        
        <div class="rst-content">
        
          















<div role="navigation" aria-label="breadcrumbs navigation">

  <ul class="wy-breadcrumbs">
    
      <li><a href="../index.html">Docs</a> &raquo;</li>
        
          <li><a href="index.html">Get started</a> &raquo;</li>
        
      <li>Quick overview</li>
    
    
      <li class="wy-breadcrumbs-aside">
        
            
            <a href="../_sources/get-started/quick-overview.md.txt" rel="nofollow"> View page source</a>
          
        
      </li>
    
  </ul>

  
  <hr/>
</div>
          <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
           <div itemprop="articleBody">
            
  <div class="section" id="quick-overview">
<h1>Quick overview<a class="headerlink" href="#quick-overview" title="Permalink to this headline">¶</a></h1>
<p>Here you can learn the most important things about LittlevGL.
You should read it first to get a general impression and read the detailed <a class="reference internal" href="../porting/index.html"><span class="doc">Porting</span></a> and <a class="reference internal" href="../overview/index.html"><span class="doc">Overview</span></a> sections after that.</p>
<div class="section" id="add-littlevgl-into-your-project">
<h2>Add LittlevGL into your project<a class="headerlink" href="#add-littlevgl-into-your-project" title="Permalink to this headline">¶</a></h2>
<p>The following steps show how to setup LittlevGL on an embedded system with a display and a touchpad.
You can use the <a class="reference internal" href="pc-simulator.html"><span class="doc">Simulators</span></a> to get ‘ready to use’ projects which can be run on your PC.</p>
<ul class="simple">
<li><p><a class="reference external" href="https://littlevgl.com/download">Download</a> or <a class="reference external" href="https://github.com/littlevgl/lvgl">Clone</a> the library</p></li>
<li><p>Copy the <code class="docutils literal notranslate"><span class="pre">lvgl</span></code> folder into your project</p></li>
<li><p>Copy <code class="docutils literal notranslate"><span class="pre">lvgl/lv_conf_templ.h</span></code> as <code class="docutils literal notranslate"><span class="pre">lv_conf.h</span></code> next to the <code class="docutils literal notranslate"><span class="pre">lvgl</span></code> folder and set at least <code class="docutils literal notranslate"><span class="pre">LV_HOR_RES_MAX</span></code>, <code class="docutils literal notranslate"><span class="pre">LV_VER_RES_MAX</span></code> and <code class="docutils literal notranslate"><span class="pre">LV_COLOR_DEPTH</span></code> macros.</p></li>
<li><p>Include <code class="docutils literal notranslate"><span class="pre">lvgl/lvgl.h</span></code> where you need to use LittlevGL related functions.</p></li>
<li><p>Call <code class="docutils literal notranslate"><span class="pre">lv_tick_inc(x)</span></code> every <code class="docutils literal notranslate"><span class="pre">x</span></code> milliseconds <strong>in a Timer or Task</strong> (<code class="docutils literal notranslate"><span class="pre">x</span></code> should be between 1 and 10). It is required for the internal timing of LittlevGL.</p></li>
<li><p>Call <code class="docutils literal notranslate"><span class="pre">lv_init()</span></code></p></li>
<li><p>Create a display buffer for LittlevGL</p></li>
</ul>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="k">static</span> <span class="n">lv_disp_buf_t</span> <span class="n">disp_buf</span><span class="p">;</span>
<span class="k">static</span> <span class="n">lv_color_t</span> <span class="n">buf</span><span class="p">[</span><span class="n">LV_HOR_RES_MAX</span> <span class="o">*</span> <span class="mi">10</span><span class="p">];</span>                     <span class="cm">/*Declare a buffer for 10 lines*/</span>
<span class="n">lv_disp_buf_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">disp_buf</span><span class="p">,</span> <span class="n">buf</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">,</span> <span class="n">LV_HOR_RES_MAX</span> <span class="o">*</span> <span class="mi">10</span><span class="p">);</span>    <span class="cm">/*Initialize the display buffer*/</span>
</pre></div>
</div>
<ul class="simple">
<li><p>Implement and register a function which can <strong>copy a pixel array</strong> to an area of your display:</p></li>
</ul>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_disp_drv_t</span> <span class="n">disp_drv</span><span class="p">;</span>               <span class="cm">/*Descriptor of a display driver*/</span>
<span class="n">lv_disp_drv_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">disp_drv</span><span class="p">);</span>          <span class="cm">/*Basic initialization*/</span>
<span class="n">disp_drv</span><span class="p">.</span><span class="n">flush_cb</span> <span class="o">=</span> <span class="n">my_disp_flush</span><span class="p">;</span>    <span class="cm">/*Set your driver function*/</span>
<span class="n">disp_drv</span><span class="p">.</span><span class="n">buffer</span> <span class="o">=</span> <span class="o">&amp;</span><span class="n">disp_buf</span><span class="p">;</span>          <span class="cm">/*Assign the buffer to the display*/</span>
<span class="n">lv_disp_drv_register</span><span class="p">(</span><span class="o">&amp;</span><span class="n">disp_drv</span><span class="p">);</span>      <span class="cm">/*Finally register the driver*/</span>

<span class="kt">void</span> <span class="nf">my_disp_flush</span><span class="p">(</span><span class="n">lv_disp_drv_t</span> <span class="o">*</span> <span class="n">disp</span><span class="p">,</span> <span class="k">const</span> <span class="n">lv_area_t</span> <span class="o">*</span> <span class="n">area</span><span class="p">,</span> <span class="n">lv_color_t</span> <span class="o">*</span> <span class="n">color_p</span><span class="p">)</span>
<span class="p">{</span>
    <span class="kt">int32_t</span> <span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">;</span>
    <span class="k">for</span><span class="p">(</span><span class="n">y</span> <span class="o">=</span> <span class="n">area</span><span class="o">-&gt;</span><span class="n">y1</span><span class="p">;</span> <span class="n">y</span> <span class="o">&lt;=</span> <span class="n">area</span><span class="o">-&gt;</span><span class="n">y2</span><span class="p">;</span> <span class="n">y</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">for</span><span class="p">(</span><span class="n">x</span> <span class="o">=</span> <span class="n">area</span><span class="o">-&gt;</span><span class="n">x1</span><span class="p">;</span> <span class="n">x</span> <span class="o">&lt;=</span> <span class="n">area</span><span class="o">-&gt;</span><span class="n">x2</span><span class="p">;</span> <span class="n">x</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="n">set_pixel</span><span class="p">(</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">,</span> <span class="o">*</span><span class="n">color_p</span><span class="p">);</span>  <span class="cm">/* Put a pixel to the display.*/</span>
            <span class="n">color_p</span><span class="o">++</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">}</span>

    <span class="n">lv_disp_flush_ready</span><span class="p">(</span><span class="n">disp</span><span class="p">);</span>         <span class="cm">/* Indicate you are ready with the flushing*/</span>
<span class="p">}</span>
</pre></div>
</div>
<ul class="simple">
<li><p>Implement and register a function which can <strong>read an input device</strong>. E.g. for a touch pad:</p></li>
</ul>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_indev_drv_t</span> <span class="n">indev_drv</span><span class="p">;</span>                  <span class="cm">/*Descriptor of a input device driver*/</span>
<span class="n">lv_indev_drv_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">indev_drv</span><span class="p">);</span>             <span class="cm">/*Basic initialization*/</span>
<span class="n">indev_drv</span><span class="p">.</span><span class="n">type</span> <span class="o">=</span> <span class="n">LV_INDEV_TYPE_POINTER</span><span class="p">;</span>    <span class="cm">/*Touch pad is a pointer-like device*/</span>
<span class="n">indev_drv</span><span class="p">.</span><span class="n">read_cb</span> <span class="o">=</span> <span class="n">my_touchpad_read</span><span class="p">;</span>      <span class="cm">/*Set your driver function*/</span>
<span class="n">lv_indev_drv_register</span><span class="p">(</span><span class="o">&amp;</span><span class="n">indev_drv</span><span class="p">);</span>         <span class="cm">/*Finally register the driver*/</span>

<span class="kt">bool</span> <span class="nf">my_touchpad_read</span><span class="p">(</span><span class="n">lv_indev_t</span> <span class="o">*</span> <span class="n">indev</span><span class="p">,</span> <span class="n">lv_indev_data_t</span> <span class="o">*</span> <span class="n">data</span><span class="p">)</span>
<span class="p">{</span>
    <span class="k">static</span> <span class="n">lv_coord_t</span> <span class="n">last_x</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
    <span class="k">static</span> <span class="n">lv_coord_t</span> <span class="n">last_y</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>

    <span class="cm">/*Save the state and save the pressed coordinate*/</span>
    <span class="n">data</span><span class="o">-&gt;</span><span class="n">state</span> <span class="o">=</span> <span class="n">touchpad_is_pressed</span><span class="p">()</span> <span class="o">?</span> <span class="nl">LV_INDEV_STATE_PR</span> <span class="p">:</span> <span class="n">LV_INDEV_STATE_REL</span><span class="p">;</span>
    <span class="k">if</span><span class="p">(</span><span class="n">data</span><span class="o">-&gt;</span><span class="n">state</span> <span class="o">==</span> <span class="n">LV_INDEV_STATE_PR</span><span class="p">)</span> <span class="n">touchpad_get_xy</span><span class="p">(</span><span class="o">&amp;</span><span class="n">last_x</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">last_y</span><span class="p">);</span>

    <span class="cm">/*Set the coordinates (if released use the last pressed coordinates)*/</span>
    <span class="n">data</span><span class="o">-&gt;</span><span class="n">point</span><span class="p">.</span><span class="n">x</span> <span class="o">=</span> <span class="n">last_x</span><span class="p">;</span>
    <span class="n">data</span><span class="o">-&gt;</span><span class="n">point</span><span class="p">.</span><span class="n">y</span> <span class="o">=</span> <span class="n">last_y</span><span class="p">;</span>

    <span class="k">return</span> <span class="nb">false</span><span class="p">;</span> <span class="cm">/*Return `false` because we are not buffering and no more data to read*/</span>
<span class="p">}</span>
</pre></div>
</div>
<ul class="simple">
<li><p>Call <code class="docutils literal notranslate"><span class="pre">lv_task_handler()</span></code> periodically every few milliseconds in the main <code class="docutils literal notranslate"><span class="pre">while(1)</span></code> loop, in Timer interrupt or in an Operation system task.
It will redraw the screen if required, handle input devices etc.</p></li>
</ul>
</div>
<div class="section" id="learn-the-basics">
<h2>Learn the basics<a class="headerlink" href="#learn-the-basics" title="Permalink to this headline">¶</a></h2>
<div class="section" id="objects-widgets">
<h3>Objects (Widgets)<a class="headerlink" href="#objects-widgets" title="Permalink to this headline">¶</a></h3>
<p>The graphical elements like Buttons, Labels, Sliders, Charts etc are called objects in LittelvGL. Go to <a class="reference internal" href="../object-types/index.html"><span class="doc">Object types</span></a> to see the full list of available types.</p>
<p>Every object has a parent object. The child object moves with the parent and if you delete the parent the children will be deleted too. Children can be visible only on their parent.</p>
<p>The <em>screen</em> is the “root” parent. To get the current screen call <code class="docutils literal notranslate"><span class="pre">lv_scr_act()</span></code>.</p>
<p>You can create a new object with <code class="docutils literal notranslate"><span class="pre">lv_&lt;type&gt;_create(parent,</span> <span class="pre">obj_to_copy)</span></code>. It will return an <code class="docutils literal notranslate"><span class="pre">lv_obj_t</span> <span class="pre">*</span></code> variable which should be used as a reference to the object to set its parameters.
The first parameter is the desired <em>parent</em>, the second parameters can be an object to copy (<code class="docutils literal notranslate"><span class="pre">NULL</span></code> is unused).
For example:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">slider1</span> <span class="o">=</span> <span class="n">lv_slider_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">(),</span> <span class="nb">NULL</span><span class="p">);</span>
</pre></div>
</div>
<p>To set some basic attribute <code class="docutils literal notranslate"><span class="pre">lv_obj_set_&lt;paramters_name&gt;(obj,</span> <span class="pre">&lt;value&gt;)</span></code> function can be used. For example:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_set_x</span><span class="p">(</span><span class="n">btn1</span><span class="p">,</span> <span class="mi">30</span><span class="p">);</span>
<span class="n">lv_obj_set_y</span><span class="p">(</span><span class="n">btn1</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
<span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">btn1</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">50</span><span class="p">);</span>
</pre></div>
</div>
<p>The objects has type specific parameters too which can be set by <code class="docutils literal notranslate"><span class="pre">lv_&lt;type&gt;_set_&lt;paramters_name&gt;(obj,</span> <span class="pre">&lt;value&gt;)</span></code> functions. For example:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_slider_set_value</span><span class="p">(</span><span class="n">slider1</span><span class="p">,</span> <span class="mi">70</span><span class="p">,</span> <span class="n">LV_ANIM_ON</span><span class="p">);</span>
</pre></div>
</div>
<p>To see the full API visit the documentation of the object types or the related header file (e.g. <code class="docutils literal notranslate"><span class="pre">lvgl/src/lv_objx/lv_slider.h</span></code>).</p>
</div>
<div class="section" id="styles">
<h3>Styles<a class="headerlink" href="#styles" title="Permalink to this headline">¶</a></h3>
<p>Styles can be assigned to the objects to changed their appearance. A style describes the appearance of rectangle-like objects (like a button or slider), texts, images and lines at once.</p>
<p>You can create a new style like this:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style1</span><span class="p">;</span>                 <span class="cm">/*Declare a new style. Should be `static`*/</span>
<span class="n">lv_style_copy</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style1</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">lv_style_plain</span><span class="p">);</span>  <span class="cm">/*Copy a buil-in style*/</span>
<span class="n">style1</span><span class="p">.</span><span class="n">body</span><span class="p">.</span><span class="n">main_color</span> <span class="o">=</span> <span class="n">LV_COLOR_RED</span><span class="p">;</span>          <span class="cm">/*Main color*/</span>
<span class="n">style1</span><span class="p">.</span><span class="n">body</span><span class="p">.</span><span class="n">grad_color</span> <span class="o">=</span> <span class="n">lv_color_hex</span><span class="p">(</span><span class="mh">0xffd83c</span><span class="p">)</span> <span class="cm">/*Gradient color (orange)*/</span>
<span class="n">style1</span><span class="p">.</span><span class="n">body</span><span class="p">.</span><span class="n">radius</span> <span class="o">=</span> <span class="mi">3</span><span class="p">;</span>
<span class="n">style1</span><span class="p">.</span><span class="n">text</span><span class="p">.</span><span class="n">color</span> <span class="o">=</span> <span class="n">lv_color_hex3</span><span class="p">(</span><span class="mh">0x0F0</span><span class="p">)</span>        <span class="cm">/*Label color (green)*/</span>
<span class="n">style1</span><span class="p">.</span><span class="n">text</span><span class="p">.</span><span class="n">font</span> <span class="o">=</span> <span class="o">&amp;</span><span class="n">lv_font_dejavu_22</span><span class="p">;</span>          <span class="cm">/*Change font*/</span>
<span class="p">...</span>
</pre></div>
</div>
<p>To set a new style for an object use the <code class="docutils literal notranslate"><span class="pre">lv_&lt;type&gt;set_style(obj,</span> <span class="pre">LV_&lt;TYPE&gt;_STYLE_&lt;NAME&gt;,</span> <span class="pre">&amp;my_style)</span></code> functions. For example:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_slider_set_style</span><span class="p">(</span><span class="n">slider1</span><span class="p">,</span> <span class="n">LV_SLIDER_STYLE_BG</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">slider_bg_style</span><span class="p">);</span>
<span class="n">lv_slider_set_style</span><span class="p">(</span><span class="n">slider1</span><span class="p">,</span> <span class="n">LV_SLIDER_STYLE_INDIC</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">slider_indic_style</span><span class="p">);</span>
<span class="n">lv_slider_set_style</span><span class="p">(</span><span class="n">slider1</span><span class="p">,</span> <span class="n">LV_SLIDER_STYLE_KNOB</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">slider_knob_style</span><span class="p">);</span>
</pre></div>
</div>
<p>If an object’s style is <code class="docutils literal notranslate"><span class="pre">NULL</span></code> then it will inherit its parent’s style. For example, the labels’ style are <code class="docutils literal notranslate"><span class="pre">NULL</span></code> by default. If you place them on a button then they will use the <code class="docutils literal notranslate"><span class="pre">style.text</span></code> properties from the button’s style.</p>
<p>Learn more in <a class="reference internal" href="../overview/style.html"><span class="doc">Style overview</span></a> section.</p>
</div>
<div class="section" id="events">
<h3>Events<a class="headerlink" href="#events" title="Permalink to this headline">¶</a></h3>
<p>Events are used to inform the user if something has happened with an object. You can assign a callback to an object which will be called if the object is clicked, released, dragged, being deleted etc. It should look like this:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_set_event_cb</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="n">btn_event_cb</span><span class="p">);</span>                 <span class="cm">/*Assign a callback to the button*/</span>

<span class="p">...</span>

<span class="kt">void</span> <span class="n">btn_event_cb</span><span class="p">(</span><span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">btn</span><span class="p">,</span> <span class="n">lv_event_t</span> <span class="n">event</span><span class="p">)</span>
<span class="p">{</span>
    <span class="k">if</span><span class="p">(</span><span class="n">event</span> <span class="o">==</span> <span class="n">LV_EVENT_CLICKED</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">printf</span><span class="p">(</span><span class="s">&quot;Clicked</span><span class="se">\n</span><span class="s">&quot;</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p>Learn more about the events in the <a class="reference internal" href="../overview/event.html"><span class="doc">Event overview</span></a> section.</p>
</div>
</div>
<div class="section" id="examples">
<h2>Examples<a class="headerlink" href="#examples" title="Permalink to this headline">¶</a></h2>
<div class="section" id="button-with-label">
<h3>Button with label<a class="headerlink" href="#button-with-label" title="Permalink to this headline">¶</a></h3>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">btn</span> <span class="o">=</span> <span class="n">lv_btn_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">(),</span> <span class="nb">NULL</span><span class="p">);</span>     <span class="cm">/*Add a button the current screen*/</span>
<span class="n">lv_obj_set_pos</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>                            <span class="cm">/*Set its position*/</span>
<span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">50</span><span class="p">);</span>                          <span class="cm">/*Set its size*/</span>
<span class="n">lv_obj_set_event_cb</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="n">btn_event_cb</span><span class="p">);</span>                 <span class="cm">/*Assign a callback to the button*/</span>

<span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">label</span> <span class="o">=</span> <span class="n">lv_label_create</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>          <span class="cm">/*Add a label to the button*/</span>
<span class="n">lv_label_set_text</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;Button&quot;</span><span class="p">);</span>                     <span class="cm">/*Set the labels text*/</span>

<span class="p">...</span>

<span class="kt">void</span> <span class="n">btn_event_cb</span><span class="p">(</span><span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">btn</span><span class="p">,</span> <span class="n">lv_event_t</span> <span class="n">event</span><span class="p">)</span>
<span class="p">{</span>
    <span class="k">if</span><span class="p">(</span><span class="n">event</span> <span class="o">==</span> <span class="n">LV_EVENT_CLICKED</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">printf</span><span class="p">(</span><span class="s">&quot;Clicked</span><span class="se">\n</span><span class="s">&quot;</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p><img alt="../_images/simple_button_example.gif" src="../_images/simple_button_example.gif" /></p>
</div>
<div class="section" id="button-with-styles">
<h3>Button with styles<a class="headerlink" href="#button-with-styles" title="Permalink to this headline">¶</a></h3>
<p>Add styles to the button from the previous example:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style_btn_rel</span><span class="p">;</span>                        <span class="cm">/*A variable to store the released style*/</span>
<span class="n">lv_style_copy</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn_rel</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">lv_style_plain</span><span class="p">);</span>         <span class="cm">/*Initialize from a built-in style*/</span>
<span class="n">style_btn_rel</span><span class="p">.</span><span class="n">body</span><span class="p">.</span><span class="n">border</span><span class="p">.</span><span class="n">color</span> <span class="o">=</span> <span class="n">lv_color_hex3</span><span class="p">(</span><span class="mh">0x269</span><span class="p">);</span>
<span class="n">style_btn_rel</span><span class="p">.</span><span class="n">body</span><span class="p">.</span><span class="n">border</span><span class="p">.</span><span class="n">width</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
<span class="n">style_btn_rel</span><span class="p">.</span><span class="n">body</span><span class="p">.</span><span class="n">main_color</span> <span class="o">=</span> <span class="n">lv_color_hex3</span><span class="p">(</span><span class="mh">0xADF</span><span class="p">);</span>
<span class="n">style_btn_rel</span><span class="p">.</span><span class="n">body</span><span class="p">.</span><span class="n">grad_color</span> <span class="o">=</span> <span class="n">lv_color_hex3</span><span class="p">(</span><span class="mh">0x46B</span><span class="p">);</span>
<span class="n">style_btn_rel</span><span class="p">.</span><span class="n">body</span><span class="p">.</span><span class="n">shadow</span><span class="p">.</span><span class="n">width</span> <span class="o">=</span> <span class="mi">4</span><span class="p">;</span>
<span class="n">style_btn_rel</span><span class="p">.</span><span class="n">body</span><span class="p">.</span><span class="n">shadow</span><span class="p">.</span><span class="n">type</span> <span class="o">=</span> <span class="n">LV_SHADOW_BOTTOM</span><span class="p">;</span>
<span class="n">style_btn_rel</span><span class="p">.</span><span class="n">body</span><span class="p">.</span><span class="n">radius</span> <span class="o">=</span> <span class="n">LV_RADIUS_CIRCLE</span><span class="p">;</span>
<span class="n">style_btn_rel</span><span class="p">.</span><span class="n">text</span><span class="p">.</span><span class="n">color</span> <span class="o">=</span> <span class="n">lv_color_hex3</span><span class="p">(</span><span class="mh">0xDEF</span><span class="p">);</span>

<span class="k">static</span> <span class="n">lv_style_t</span> <span class="n">style_btn_pr</span><span class="p">;</span>                         <span class="cm">/*A variable to store the pressed style*/</span>
<span class="n">lv_style_copy</span><span class="p">(</span><span class="o">&amp;</span><span class="n">style_btn_pr</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_btn_rel</span><span class="p">);</span>           <span class="cm">/*Initialize from the released style*/</span>
<span class="n">style_btn_pr</span><span class="p">.</span><span class="n">body</span><span class="p">.</span><span class="n">border</span><span class="p">.</span><span class="n">color</span> <span class="o">=</span> <span class="n">lv_color_hex3</span><span class="p">(</span><span class="mh">0x46B</span><span class="p">);</span>
<span class="n">style_btn_pr</span><span class="p">.</span><span class="n">body</span><span class="p">.</span><span class="n">main_color</span> <span class="o">=</span> <span class="n">lv_color_hex3</span><span class="p">(</span><span class="mh">0x8BD</span><span class="p">);</span>
<span class="n">style_btn_pr</span><span class="p">.</span><span class="n">body</span><span class="p">.</span><span class="n">grad_color</span> <span class="o">=</span> <span class="n">lv_color_hex3</span><span class="p">(</span><span class="mh">0x24A</span><span class="p">);</span>
<span class="n">style_btn_pr</span><span class="p">.</span><span class="n">body</span><span class="p">.</span><span class="n">shadow</span><span class="p">.</span><span class="n">width</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
<span class="n">style_btn_pr</span><span class="p">.</span><span class="n">text</span><span class="p">.</span><span class="n">color</span> <span class="o">=</span> <span class="n">lv_color_hex3</span><span class="p">(</span><span class="mh">0xBCD</span><span class="p">);</span>

<span class="n">lv_btn_set_style</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="n">LV_BTN_STYLE_REL</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_btn_rel</span><span class="p">);</span>    <span class="cm">/*Set the button&#39;s released style*/</span>
<span class="n">lv_btn_set_style</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="n">LV_BTN_STYLE_PR</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">style_btn_pr</span><span class="p">);</span>      <span class="cm">/*Set the button&#39;s pressed style*/</span>
</pre></div>
</div>
<p><img alt="../_images/button_style_example.gif" src="../_images/button_style_example.gif" /></p>
</div>
<div class="section" id="slider-and-object-alignment">
<h3>Slider and object alignment<a class="headerlink" href="#slider-and-object-alignment" title="Permalink to this headline">¶</a></h3>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">label</span><span class="p">;</span>

<span class="p">...</span>

<span class="cm">/* Create a slider in the center of the display */</span>
<span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">slider</span> <span class="o">=</span> <span class="n">lv_slider_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">(),</span> <span class="nb">NULL</span><span class="p">);</span>
<span class="n">lv_obj_set_width</span><span class="p">(</span><span class="n">slider</span><span class="p">,</span> <span class="mi">200</span><span class="p">);</span>                        <span class="cm">/*Set the width*/</span>
<span class="n">lv_obj_align</span><span class="p">(</span><span class="n">slider</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">,</span> <span class="n">LV_ALIGN_CENTER</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>    <span class="cm">/*Align to the center of the parent (screen)*/</span>
<span class="n">lv_obj_set_event_cb</span><span class="p">(</span><span class="n">slider</span><span class="p">,</span> <span class="n">slider_event_cb</span><span class="p">);</span>         <span class="cm">/*Assign an event function*/</span>

<span class="cm">/* Create a label below the slider */</span>
<span class="n">label</span> <span class="o">=</span> <span class="n">lv_label_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">(),</span> <span class="nb">NULL</span><span class="p">);</span>
<span class="n">lv_label_set_text</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;0&quot;</span><span class="p">);</span>
<span class="n">lv_obj_set_auto_realign</span><span class="p">(</span><span class="n">slider</span><span class="p">,</span> <span class="nb">true</span><span class="p">);</span>
<span class="n">lv_obj_align</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="n">slider</span><span class="p">,</span> <span class="n">LV_ALIGN_OUT_BOTTOM_MID</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>

<span class="p">...</span>

<span class="kt">void</span> <span class="n">slider_event_cb</span><span class="p">(</span><span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">slider</span><span class="p">,</span> <span class="n">lv_event_t</span> <span class="n">event</span><span class="p">)</span>
<span class="p">{</span>
    <span class="k">if</span><span class="p">(</span><span class="n">event</span> <span class="o">==</span> <span class="n">LV_EVENT_VALUE_CHANGED</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">static</span> <span class="kt">char</span> <span class="n">buf</span><span class="p">[</span><span class="mi">4</span><span class="p">];</span>                                 <span class="cm">/* max 3 bytes  for number plus 1 null terminating byte */</span>
        <span class="n">snprintf</span><span class="p">(</span><span class="n">buf</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="s">&quot;%u&quot;</span><span class="p">,</span> <span class="n">lv_slider_get_value</span><span class="p">(</span><span class="n">slider</span><span class="p">));</span>
        <span class="n">lv_label_set_text</span><span class="p">(</span><span class="n">slider_label</span><span class="p">,</span> <span class="n">buf</span><span class="p">);</span>               <span class="cm">/*Refresh the text*/</span>
    <span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p><img alt="../_images/slider_example.gif" src="../_images/slider_example.gif" /></p>
</div>
<div class="section" id="list-and-themes">
<h3>List and themes<a class="headerlink" href="#list-and-themes" title="Permalink to this headline">¶</a></h3>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cm">/*Texts of the list elements*/</span>
<span class="k">const</span> <span class="kt">char</span> <span class="o">*</span> <span class="n">txts</span><span class="p">[]</span> <span class="o">=</span> <span class="p">{</span><span class="s">&quot;First&quot;</span><span class="p">,</span> <span class="s">&quot;Second&quot;</span><span class="p">,</span> <span class="s">&quot;Third&quot;</span><span class="p">,</span> <span class="s">&quot;Forth&quot;</span><span class="p">,</span> <span class="s">&quot;Fifth&quot;</span><span class="p">,</span> <span class="s">&quot;Sixth&quot;</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">};</span>

<span class="cm">/* Initialize and set a theme. `LV_THEME_NIGHT` needs to enabled in lv_conf.h. */</span>
<span class="n">lv_theme_t</span> <span class="o">*</span> <span class="n">th</span> <span class="o">=</span> <span class="n">lv_theme_night_init</span><span class="p">(</span><span class="mi">20</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>
<span class="n">lv_theme_set_current</span><span class="p">(</span><span class="n">th</span><span class="p">);</span>

<span class="cm">/*Create a list*/</span>
<span class="n">lv_obj_t</span><span class="o">*</span> <span class="n">list</span> <span class="o">=</span> <span class="n">lv_list_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">(),</span> <span class="nb">NULL</span><span class="p">);</span>
<span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">list</span><span class="p">,</span> <span class="mi">120</span><span class="p">,</span> <span class="mi">180</span><span class="p">);</span>
<span class="n">lv_obj_set_pos</span><span class="p">(</span><span class="n">list</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>

<span class="cm">/*Add buttons*/</span>
<span class="kt">uint8_t</span> <span class="n">i</span><span class="p">;</span>
<span class="k">for</span><span class="p">(</span><span class="n">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="n">txts</span><span class="p">[</span><span class="n">i</span><span class="p">];</span> <span class="n">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">btn</span> <span class="o">=</span> <span class="n">lv_list_add_btn</span><span class="p">(</span><span class="n">list</span><span class="p">,</span> <span class="n">LV_SYMBOL_FILE</span><span class="p">,</span> <span class="n">txts</span><span class="p">[</span><span class="n">i</span><span class="p">]);</span>
    <span class="n">lv_obj_set_event_cb</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="n">list_event</span><span class="p">);</span>       <span class="cm">/*Assign event function*/</span>
    <span class="n">lv_btn_set_toggle</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="nb">true</span><span class="p">);</span>               <span class="cm">/*Enable on/off states*/</span>
<span class="p">}</span>

<span class="cm">/* Initialize and set an other theme. `LV_THEME_MATERIAL` needs to enabled in lv_conf.h.</span>
<span class="cm"> * If `LV_TEHE_LIVE_UPDATE  1` then the previous list&#39;s style will be updated too.*/</span>
<span class="n">th</span> <span class="o">=</span> <span class="n">lv_theme_material_init</span><span class="p">(</span><span class="mi">210</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>
<span class="n">lv_theme_set_current</span><span class="p">(</span><span class="n">th</span><span class="p">);</span>

<span class="cm">/*Create an other list*/</span>
<span class="n">list</span> <span class="o">=</span> <span class="n">lv_list_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">(),</span> <span class="nb">NULL</span><span class="p">);</span>
<span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">list</span><span class="p">,</span> <span class="mi">120</span><span class="p">,</span> <span class="mi">180</span><span class="p">);</span>
<span class="n">lv_obj_set_pos</span><span class="p">(</span><span class="n">list</span><span class="p">,</span> <span class="mi">150</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>

<span class="cm">/*Add buttons with the same texts*/</span>
<span class="k">for</span><span class="p">(</span><span class="n">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="n">txts</span><span class="p">[</span><span class="n">i</span><span class="p">];</span> <span class="n">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">btn</span> <span class="o">=</span> <span class="n">lv_list_add_btn</span><span class="p">(</span><span class="n">list</span><span class="p">,</span> <span class="n">LV_SYMBOL_FILE</span><span class="p">,</span> <span class="n">txts</span><span class="p">[</span><span class="n">i</span><span class="p">]);</span>
    <span class="n">lv_obj_set_event_cb</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="n">list_event</span><span class="p">);</span>
    <span class="n">lv_btn_set_toggle</span><span class="p">(</span><span class="n">btn</span><span class="p">,</span> <span class="nb">true</span><span class="p">);</span>
<span class="p">}</span>

<span class="p">...</span>

<span class="k">static</span> <span class="kt">void</span> <span class="n">list_event</span><span class="p">(</span><span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">btn</span><span class="p">,</span> <span class="n">lv_event_t</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
    <span class="k">if</span><span class="p">(</span><span class="n">e</span> <span class="o">==</span> <span class="n">LV_EVENT_CLICKED</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">printf</span><span class="p">(</span><span class="s">&quot;%s</span><span class="se">\n</span><span class="s">&quot;</span><span class="p">,</span> <span class="n">lv_list_get_btn_text</span><span class="p">(</span><span class="n">btn</span><span class="p">));</span>
    <span class="p">}</span>

<span class="p">}</span>
</pre></div>
</div>
<p><img alt="../_images/list_theme_example.gif" src="../_images/list_theme_example.gif" /></p>
</div>
<div class="section" id="use-littlevgl-from-micropython">
<h3>Use LittlevGL from Micropython<a class="headerlink" href="#use-littlevgl-from-micropython" title="Permalink to this headline">¶</a></h3>
<p>Learn more about <a class="reference internal" href="micropython.html"><span class="doc">Micropython</span></a>.</p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span><span class="c1"># Create a Button and a Label</span>
<span class="n">scr</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">obj</span><span class="p">()</span>
<span class="n">btn</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">btn</span><span class="p">(</span><span class="n">scr</span><span class="p">)</span>
<span class="n">btn</span><span class="o">.</span><span class="n">align</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">scr_act</span><span class="p">(),</span> <span class="n">lv</span><span class="o">.</span><span class="n">ALIGN</span><span class="o">.</span><span class="n">CENTER</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span>
<span class="n">label</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">label</span><span class="p">(</span><span class="n">btn</span><span class="p">)</span>
<span class="n">label</span><span class="o">.</span><span class="n">set_text</span><span class="p">(</span><span class="s2">&quot;Button&quot;</span><span class="p">)</span>

<span class="c1"># Load the screen</span>
<span class="n">lv</span><span class="o">.</span><span class="n">scr_load</span><span class="p">(</span><span class="n">scr</span><span class="p">)</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="contributing">
<h2>Contributing<a class="headerlink" href="#contributing" title="Permalink to this headline">¶</a></h2>
<p>LittlevGL uses the <a class="reference external" href="https://forum.littlevgl.com">Forum</a> to ask and answer questions and <a class="reference external" href="https://github.com/littlevgl/lvgl/issues">GitHub’s Issue tracker</a> for development-related discussion (such as bug reports, feature suggestions etc.).</p>
<p>There are many opportunities to contribute to LittlevGL such as:</p>
<ul class="simple">
<li><p><strong>Help others</strong> in the <a class="reference external" href="https://forum.littlevgl.com">Forum</a>.</p></li>
<li><p><strong>Inspire people</strong> by speaking about your project in <a class="reference external" href="https://forum.littlevgl.com/c/my-projects">My project</a> category in the Forum or add it to the <a class="reference external" href="https://blog.littlevgl.com/2018-12-26/references">References</a> post</p></li>
<li><p><strong>Improve and/or translate the documentation.</strong> Go to the <a class="reference external" href="https://github.com/littlevgl/docs">Documentation</a> repository to learn more</p></li>
<li><p><strong>Write a blog post</strong> about your experiences. See how to do it in the <a class="reference external" href="https://github.com/littlevgl/blog">Blog</a> repository</p></li>
<li><p><strong>Report and/or fix bugs</strong> in <a class="reference external" href="https://github.com/littlevgl/lvgl/issues">GitHub’s issue tracker</a></p></li>
<li><p><strong>Help in the developement</strong>. Check the <a class="reference external" href="https://github.com/littlevgl/lvgl/issues">Open issues</a> especially the ones with <a class="reference external" href="https://github.com/littlevgl/lvgl/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22">Help wanted</a> label and tell your ideas about a topic or implement a feature.</p></li>
</ul>
<p>If you are interested in contributing to LittlevGL, then please read the guides below to get started.</p>
<ul class="simple">
<li><p><a class="reference external" href="https://blog.littlevgl.com/2018-12-06/contributing">Contributing guide</a></p></li>
<li><p><a class="reference external" href="https://github.com/littlevgl/lvgl/blob/master/docs/CODING_STYLE.md">Coding style guide</a></p></li>
</ul>
</div>
</div>


           </div>
           
          </div>
          <footer>
  
    <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
      
        <a href="micropython.html" class="btn btn-neutral float-right" title="Micropython" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right"></span></a>
      
      
        <a href="pc-simulator.html" class="btn btn-neutral float-left" title="Simulator on PC" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left"></span> Previous</a>
      
    </div>
  

  <hr/>

  <div role="contentinfo">
    <p>
        &copy; Copyright 2020, Gabor Kiss-Vamosi
      <span class="lastupdated">
        Last updated on Nov 21, 2020.
      </span>

    </p>
  </div>
  Built with <a href="http://sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/rtfd/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>. 

</footer>

        </div>
      </div>

    </section>

  </div>
  


  <script type="text/javascript">
      jQuery(function () {
          SphinxRtdTheme.Navigation.enable(true);
      });
  </script>

  
  
    
  

 <script type="text/javascript">
    $(document).ready(function() {
        $(".toggle > *").hide();
        $(".toggle .header").show();
        $(".toggle .header").click(function() {
            $(this).parent().children().not(".header").toggle(400);
            $(this).parent().children(".header").toggleClass("open");
        })
    });
</script>


<script type="text/javascript" src="https://docs.lvgl.io/misc/common.js"></script>



</body>
</html>